<template>
  <v-navigation-drawer id="app-drawer" v-model="currentVal" app floating persistent mobile-break-point="991" width="240"
                       color="grey lighten-4" style="top:0px;z-index:101">

    <template v-slot:prepend>

      <v-list-item class="bg">

        <v-list-item-avatar>
          <!--iconbiaoqian1-->

          <!-- <img src="../assets/img/logo_blue.png" alt="logo"> -->
          <v-icon class="store">iconfont-icon iconmendiang</v-icon>


          <!-- <div class="avatar-wrapper">
            <img src="../assets/img/logo_blue.png" alt="logo">
          </div> -->
        </v-list-item-avatar>


        <v-list-item-content>
          <v-list-item-title class="font-weight-bold textWhite">{{userContext.nickname}}</v-list-item-title>
          <v-list-item-subtitle class="textWhite">{{userContext.role==='STORE'?'门店':'品牌'}}</v-list-item-subtitle>
        </v-list-item-content>

      </v-list-item>

    </template>


    <v-divider></v-divider>

    <v-list dense nav>

      <v-list-item-group color="success">
        <!-- :style="iconBg" -->
        <v-list-item @click="actionHandle(item.menuCode)" v-for="(item,index) in drawerMenu" :key="index"
                     :class="[bgImage,item.icon]">

          <template v-if="item.menuCode==='v-divider'">
            <v-divider></v-divider>
          </template>
          <!-- iconfont-icon iconsanpinw -->
          <template v-else>
            <v-list-item-icon>
              <!-- <v-icon v-text="item.icon" class="customiIcon"></v-icon> -->
              <!-- <img :src='require("../assets/img/left_nav/inventory-report.png")' width="24px" height="24px" alt=""> -->
              <!-- <img :src='require(`../assets/img/left_nav/${item.icon}.png`)' width="24px" height="24px" alt=""> -->
              <!-- <img :src="require('../assets/img/left_nav/'+item.icon+'.png')" width="24px" height="24px" alt=""> -->

            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title v-text="item.name" class="textBlack"></v-list-item-title>
            </v-list-item-content>

            <v-list-item-icon>
              <v-icon>iconfont-icon iconxiangyou</v-icon>
            </v-list-item-icon>
          </template>

        </v-list-item>

      </v-list-item-group>
    </v-list>

  </v-navigation-drawer>
</template>

<script>
    import {mapGetters, mapState} from 'vuex';

    /**
     * 侧边导航栏
     * @author Canaan
     * @date 2019/8/9 22:27.
     */
    export default {
        name: 'Drawer',
        mounted() {

        },
        components: {},
        props: {
            value: {
                type: Boolean,
                default: null
            }
        },
        data() {
            return {
                currentVal: this.value,
                bgImage: "bgImage"
            }
        },

        computed: {
            ...mapGetters([
                'drawerMenu',
            ]),
            ...mapState([
                'userContext'
            ])
        },
        methods: {
            actionHandle(action) {
                switch (action) {
                    case "logout":
                        this.logout();
                        break;
                    default:
                        let toPath = '/' + action;
                        if (this.$route.path !== toPath) {
                            this.$router.push(toPath)
                        }
                }
                switch (this.$vuetify.breakpoint.name) {
                    case 'xs':
                    case 'sm':
                        this.currentVal = false;
                        break;
                    case 'md':
                    case 'lg':
                    case 'xl':
                        break;
                }

            },
            /**
             * 退出
             */
            logout() {
                this.$ajax.get('/logout.do')
                    .then(res => {
                        //清空android 缓存
                        if (res.code === 'ok') {
                            this.$bus.$emit(this.$env.LOGIN_OUT_SUCCESS);
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
            }
        },
        watch: {
            value(val) {
                this.currentVal = val;
            },
            currentVal(val) {
                this.$emit('input', val);
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .bg {
    background-image: linear-gradient(-90deg, #ff6c59 0%, #ff9859 100%);
    height: 120px;
  }

  .store {
    font-size: 30px;
  }

  .v-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 100%;
    border: 3px solid #fff;
  }

  .v-avatar .v-icon {
    display: -webkit-inline-box;

  }

  .textWhite {
    color: #fff !important;
  }

  .textBlack {
    color: #000 !important;
    font-weight: 700 !important;
  }

  .customiIcon {
    color: #ff9859;

  }

  .v-application--is-ltr .v-list-item__action:first-child,
  .v-application--is-ltr .v-list-item__icon:first-child {
    margin-left: 8px;
    margin-right: 16px;
  }

  .v-list-item--active .v-icon {
    color: #ff6e59;
  }


  .bgImage {
    background-size: 24px 24px !important;
    background-position: 10px 8px !important;
    background-repeat: no-repeat;
  }


  /* 物料信息 */
  .material-info {
    background-image: url("../assets/img/left_nav/material-info.png") !important;

  }

  /* 入库记录 */
  .inventory-report {
    background-image: url("../assets/img/left_nav/inventory-report.png") !important;

  }

  /* 个人中心 */
  .person-center {
    background-image: url("../assets/img/left_nav/person-center.png") !important;
    background-size: 18px 24px !important;
    background-position: 13px 8px !important;

  }

  /* 切换账号 */
  .switch-account {
    background-image: url("../assets/img/left_nav/switch-account.png") !important;

  }

  /* 物料入库 */
  .material-inventory {
    background-image: url("../assets/img/left_nav/material-inventory.png") !important;

  }

  /* 出库记录 */
  .inventory-trace-record {
    background-image: url("../assets/img/left_nav/inventory-trace-record.png") !important;

  }

  /* 预警中心 */
  .inventory-warning {
    background-image: url("../assets/img/left_nav/inventory-warning.png") !important;

  }

  /* 系统设置 */
  .system-setup {
    background-image: url("../assets/img/left_nav/system-setup.png") !important;

  }

  /* 入库记录 */
  .inventory-record {
    background-image: url("../assets/img/left_nav/inventory-record.png") !important;

  }

  /* 个人中心 */
  .person-center {
    background-image: url("../assets/img/left_nav/person-center.png") !important;

  }

</style>
